<template>
	<view>
		<view class="header">
			<view class="card" v-if="userInfo.markId === 0">
				<view class="account acea-row row-top row-between">
					<view>
						<view class="text1">草汁堂会员卡</view>
						<view class="text2">成为会员 立即省钱</view>
					</view>
					<!-- <view class="text4">已是会员？绑卡</view> -->
				</view>
				<view class="text3">
					根据用户平均消费计算，会员每年预计可省钱
					<text style="color:#fff">¥364</text>
				</view>
			</view>
			<view class="card" v-else @click="goPage('/pages/users/user_info/index')">
				<view class="account acea-row row-between-wrapper">
					<image class="avatar" :src="userInfo.avatar" v-if="userInfo.avatar" @click="goEdit()"></image>
					<view class="nickname">{{ userInfo.nickname }}</view>
					<view>
						<view class="level">{{ userInfo.markName }}</view>
						<view class="dec">精力羹优惠2元/包</view>
					</view>
				</view>
				<view class="cumulative acea-row row-bottom">
					<view class="item">No.</view>
					<view class="item no">{{ userInfo.userNo || '暂无会员卡号，请联系店铺' }}</view>
					<view class="item">
						已节省
						<text class="money">{{ userInfo.salePrice || 0 }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="wrapper acea-row row-around">
			<view class="item" v-for="(item, index) in vipProduct" :key="index" :class="item.id == selected.id?'on':''"
				@click="selectProduct(item)">
				<view class="title">{{ item.storeName }}</view>
				<view class="price">
					￥{{ item.price }}
				</view>
				<view class="level">成为{{ item.markName || '' }}</view>
			</view>
		</view>
		<button class="btn" type="warn" :disabled="!selected" @click="goDetail()">立即升级</button>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		getProductLevel,
		postCartAdd
	} from '@/api/store.js';

	export default {
		data() {
			return {
				userInfo: {},
				vipProduct: [],
				selected: ''
			};
		},
		onLoad() {
			this.getUserInfo();
			this.get_vip_product();
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			return {
				title: '发现一家好店铺，分享给你～',
				path: '/pages/index/index?spid=' + this.$store.getters.uid || '',
				imageUrl: "http://image.tocj1314.com/0746056800564c178edcc3c9bfdf0be2.png"
			};
		},
		methods: {
			/**
			 * 获取用户详情
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.$set(that, 'userInfo', res.data);
				});
			},
			/**
			 * 获取我的推荐
			 */
			get_vip_product: function() {
				let that = this;
				if (that.hotScroll) return;
				getProductLevel().then(res => {
					that.$set(that, 'vipProduct', res.data.list);
				});
			},
			selectProduct(item) {
				this.$set(this, 'selected', item);
			},
			// 商品详情
			goDetail() {
				let that = this;
				console.log(this.selected)
				postCartAdd({
						productId: Number(that.selected.id),
						cartNum: 1,
						isNew: true,
						productAttrUnique: that.selected.skuId
					})
					.then(function(res) {
						uni.navigateTo({
							url: '/pages/order_confirm/index?new=true&cartId=' + res.data.cartId
						});
					})
					.catch(res => {
						return that.$util.Tips({
							title: res
						});
					});
			},
			// goPage
			goPage(url) {
				uni.navigateTo({
					url
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.header {
		width: 690rpx;
		height: 330rpx;
		background-image: linear-gradient(to right, #f33b2b 0%, #f36053 100%);
		border-radius: 16rpx;
		margin: 20rpx auto;
		box-sizing: border-box;
		color: rgba(255, 255, 255, 0.6);
		font-size: 24rpx;
	}

	.header .card {
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		height: 100%;
		width: 100%;
		box-sizing: border-box;
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		padding: 36rpx;
	}

	.header .card .text1 {
		font-size: 38rpx;
		color: #fff;
	}

	.header .card .text2 {
		font-size: 32rpx;
	}

	.header .card .text3 {
		font-size: 24rpx;
	}

	.header .card .text4 {
		font-size: 22rpx;
	}

	.header .card .account .avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.header .card .account .nickname {
		flex: 1;
		margin: 0 20rpx;
		font-size: 40rpx;
	}

	.header .card .account .level {
		text-align: right;
		font-size: 28rpx;
		font-weight: bold;
	}

	.header .card .account .dec {
		color: #ccc;
	}

	.header .card .cumulative {
		margin-top: 40rpx;
	}

	.header .card .cumulative .item {}

	.header .card .cumulative .no {
		flex: 1;
		color: #83c8ff;
	}

	.header .card .cumulative .item .money {
		font-size: 42rpx;
		color: #fff;
		margin-top: 6rpx;
	}

	.wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin: 50rpx 30rpx;

		.item {
			padding: 10rpx 20rpx 15rpx;
			width: 210rpx;
			background-color: #fff;
			border-radius: 10px;
			border: solid 1px #666;
			overflow: hidden;
			text-align: center;

			.title {
				font-size: 26rpx;
				font-weight: bold;
				color: #000000;
			}

			.price {
				margin: 8rpx 0;
				font-size: 30rpx;
				font-weight: bold;
				color: #000000;
			}

			.level {
				font-size: 24rpx;
			}
		}

		.item.on {
			border-color: $theme-color;
		}
	}

	.btn {
		margin: 0 auto;
		padding: 0 14px;
		width: 690rpx;
		line-height: 2.5555;
	}
</style>
